<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'TeacherCanteen',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/network/teacher'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'teacher-boy' : 'teacher-girl'" :style="cssVar" @click="changePage">
      <div class="teacher-con">
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <!-- 主要文案 -->
          <div v-if="annualData.data21 && annualData.data22 && annualData.data23" class="mt-10">
            <div class="mt-10">
              <p>时光飞逝，转眼间又是一年</p>
              <p>作为孜孜不倦的园丁</p>
              <p>您在校园中的每一天</p>
              <p>都充满了忙碌与充实</p>
              <p>无论是工作日</p>
              <p>还是悠闲的周末</p>
              <p>食堂的美味佳肴总是陪伴着您</p>
              <p>您总共充值 <span class="data">{{ annualData.data21 }}</span> 元</p>
              <p>最常关顾的食堂是 <span class="data">{{annualData.data22}}</span></p>
              <p>累计消费 <span class="data">{{ annualData.data23 }}</span> 元</p>
              <p>您的每一笔消费</p>
              <p>都默默见证着日常的点点滴滴</p>
              <p>更潜藏着回忆与感动</p>
            </div>
            <br/>
            <br/>
            <br/>
          </div>
          <!-- 兜底文案 -->
          <div v-else class="mt-10">
            <div class="mt-10">
              <p>时光飞逝，转眼间又是一年</p>
              <p>作为孜孜不倦的园丁</p>
              <p>您在校园中的每一天</p>
              <p>都充满了忙碌与充实</p>
              <p>无论是工作日</p>
              <p>还是悠闲的周末</p>
              <p>食堂的美味佳肴总是陪伴着您</p>
              <p>您的每一笔消费</p>
              <p>都默默见证着日常的点点滴滴</p>
              <p>您在忙碌工作的间隙中</p>
              <p>享受美食的时光</p>
              <p>潜藏着一份份回忆与感动</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.teacher-boy {
  background: url("../../assets/images/canteen/teacher-boy.jpg") no-repeat;
  background-size: 100% 100%;
}
.teacher-girl {
  background: url("../../assets/images/canteen/teacher-girl.jpg") no-repeat;
  background-size: 100% 100%;
}
.teacher-con {
  padding: 50px 10px;
}

p {
  color: #372116;
}
</style>
